body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #1e1e1e;
  color: #e0e0e0;
}
.container {
  display: flex;
  height: 100%;
}
.panel {
  height: 100%;
  overflow: auto;
}
#left-panel {
  width: 300px;
  background-color: #2d2d2d;
  border-right: 0.0625em solid #444; /* 1px */
  padding: 1.25em; /* 20px */
  box-sizing: border-box;
  flex-shrink: 0; /* Ensure the left panel does not shrink */
}
#right-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.splitter {
  width: 0.625em; /* 10px */
  background-color: #444;
  cursor: col-resize;
  transition: background-color 0.3s;
  flex-shrink: 0; /* Prevents the splitter from shrinking */
}
.splitter:hover {
  background-color: #666;
}
h2,
h3 {
  margin: 1.25em 0 0.625em; /* 20px 0 10px */
  color: #bb86fc;
}
h4 {
  margin: 0.2em;
}
#chat-history {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.25em; /* 20px */
  display: flex;
  flex-direction: column;
}
.message-container {
  margin-bottom: 0.5em;
  animation: fadeIn 0.5s;
}
.message {
  padding: 0.625em 0.9375em; /* 10px 15px */
  border-radius: 1.125em; /* 18px */
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625em); /* 10px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.user-container {
  align-self: flex-end;
  margin-top: 2em;
  margin-bottom: 1em;
}

.ai-container {
  align-self: flex-start;
}

.message-user {
  background-color: #4a4a4a;
  border-bottom-right-radius: 0.3125em; /* 5px */
}

.message-ai {
  border-bottom-left-radius: 0.3125em; /* 5px */
}

.message-fw{
  margin-left: 2em;
  border-radius: 1.125em; /* 18px */
  border-top-left-radius: 0.3125em; /* 5px */
}

.message-default {
  background-color: #002d3b;
}

.message-agent {
  margin-top: 2em;
  background-color: #003444;
}

.message-agent-response {
  background-color: #1f5327;
}

.message-agent-delegation {
  background-color: #1f534a;
}

.message-tool {
  background-color: #001b4b;
}

.message-code-exe {
  background-color: #2f1a60;
}

.message-adhoc {
  background-color: #124850;
}

.message-info {
  background-color: #2d2d2d;
}

.message-warning {
  background-color: #826100;
}

.message-error {
  background-color: #5e1212;
}

.agent-start {
  font-size: 0.8em;
  color: #ffffff;
  margin-bottom: 0.3125em; /* 5px */
  opacity: 0.7;
}
.ai-info {
  font-size: 0.9em;
  margin-bottom: 0.625em; /* 10px */
  border-collapse: collapse;
  width: 100%;
}
.ai-info th,
.ai-info td {
  text-align: left;
  padding: 0.25em; /* 4px */
  border-bottom: 0.0625em solid rgba(255, 255, 255, 0.1); /* 1px */
}
.ai-info th {
  color: #bb86fc;
  width: 40%;
}
.message-actions {
  margin-top: 0.3125em; /* 5px */
  font-size: 0.8em;
  color: #ffffff;
}
.message-action {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.message-action:hover {
  opacity: 1;
}
#input-section {
  display: flex;
  padding: 1.25em; /* 20px */
  background-color: #2d2d2d;
}
#chat-input {
  flex-grow: 1;
  resize: none;
  /* min-height: 3.125em; 50px */
  max-height: 9.375em; /* 150px */
  padding: 0.625em 0.9375em; /* 10px 15px */
  border: none;
  border-radius: 1em; /* 25px */
  background-color: #3d3d3d;
  color: #e0e0e0;
  font-size: 1em; /* 16px */
  transition: background-color 0.3s;
}
#chat-input:focus {
  outline: none;
  background-color: #4d4d4d;
}
.chat-button {
  color: #1e1e1e;
  font-size: 1em;
  border: none;
  border-radius: 50%;
  width: 3.125em; /* 50px */
  height: 3.125em; /* 50px */
  margin-left: 0.625em; /* 10px */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}
.chat-button:active {
  transform: scale(0.95);
}

.chat-list-button {
  cursor: pointer;
  color: inherit; /* Keep the text color the same as the surrounding text */
  text-decoration: none; /* Remove underline by default */
}

.chat-list-button:hover {
  text-decoration: underline; /* Add underline on hover */
}

#send-button {
  background-color: #bb86fc;
}
#send-button:hover {
  background-color: #c397ff;
}

.pause-button{
  background-color: #3270e2;
}
.pause-button:hover{
  background-color: #3270e2;
}

.config-section {
  margin-bottom: 1.25em; /* 20px */
}
.config-button {
  background-color: #3700b3;
  color: #ffffff;
  border: none;
  padding: 0.5em 0.75em; /* 8px 12px */
  margin: 0.3125em; /* 5px */
  border-radius: 0.3125em; /* 5px */
  cursor: pointer;
  transition: background-color 0.3s;
}
.config-button:hover {
  background-color: #5c2bd1;
}
.config-list {
  list-style-type: none;
  padding: 0;
}
.config-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3125em 0; /* 5px 0 */
  border-bottom: 0.0625em solid #444; /* 1px */
}
.edit-button {
  background-color: transparent;
  color: #bb86fc;
  border: 0.0625em solid #bb86fc; /* 1px */
  padding: 0.125em 0.5em; /* 2px 8px */
  border-radius: 0.1875em; /* 3px */
  cursor: pointer;
  transition: background-color 0.3s;
}
.edit-button:hover {
  background-color: rgba(187, 134, 252, 0.2);
}
.switch {
  position: relative;
  display: inline-block;
  width: 3.125em; /* 50px */
  height: 1.5em; /* 24px */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4a4a4a;
  transition: 0.4s;
  border-radius: 1.5em; /* 24px */
}
.slider:before {
  position: absolute;
  content: "";
  height: 1em; /* 16px */
  width: 1em; /* 16px */
  left: 0.25em; /* 4px */
  bottom: 0.25em; /* 4px */
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #bb86fc;
}
input:checked + .slider:before {
  transform: translateX(1.625em); /* 26px */
}

.kvps-key {
  font-weight: bold;
}

.kvps-val {
  white-space: pre-wrap;
}

.msg-json{
  display:none;
}

.msg-thoughts{
}

.connected{
color: #6ec583;
}

.disconnected{
  color: #d87979;
}

.font-bold{
  font-weight: bold;
}